<template>

  <div class="filter-container">
    <el-row>

      <el-col span="3" >
        <el-form-item label="姓名:" >
          <el-input placeholder="请输入名字" v-model="state.pagination.driverName" clearable/>
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-form-item label="货车类型:">
          <el-select  v-model="state.pagination.type" placeholder="请选择货车类型" value="">
            <el-option label="" value=""/>
            <el-option label="小型货车" value="小型货车"/>
            <el-option label="中型货车" value="中型货车"/>
            <el-option label="大型货车" value="大型货车"/>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-form-item label="状态:">
          <el-select v-model="state.pagination.status" placeholder="请选择状态" value="">
            <el-option label="" value=""/>
            <el-option label="空闲中" value="0"/>
            <el-option label="等待中" value="1"/>
            <el-option label="运输中" value="2"/>
          </el-select>
        </el-form-item>
      </el-col>
      &nbsp;<el-col span="3">
      <el-button @click="load">查询</el-button>
      <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
    </el-col>
    </el-row>

  </div>

  <el-table :data="state.dataList" style="width: 100%">
    <el-table-column label="司机id" align="center" prop="id"></el-table-column>
    <el-table-column label="司机姓名" align="center" prop="driverName" ></el-table-column>
    <el-table-column label="联系方式" align="center" prop="driverPhone" width="150"></el-table-column>
    <el-table-column label="货车类型" align="center"  prop="type"></el-table-column>
    <el-table-column label="最大载重(千克)" align="center" prop="carLoad"></el-table-column>
    <el-table-column label="最大容量(立方)" align="center" prop="size"></el-table-column>
    <el-table-column label="工资(元)" align="center" prop="salary"></el-table-column>
    <el-table-column label="状态" align="center" prop="status"></el-table-column>
    <el-table-column label="所在地" align="center" prop="address" width="150"></el-table-column>
    <el-table-column label="发货地" align="center" prop="line.startAddress" width="150"></el-table-column>
    <el-table-column label="目的地" align="center" prop="line.endAddress" width="150"></el-table-column>
    <el-table-column label="距离(千米)"  align="center" prop="line.distance"></el-table-column>
    <el-table-column label="操作" align="center" fixed="right" width="180">
      <template v-slot="{row}">
        <el-button link type="primary" size="small" @click="handleEidt(row)">修改</el-button>
        <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination-container">

    <el-pagination
        class="pagiantion"

        @current-change="handleCurrentChange"

        @size-change="handleSizeChange"

        :current-page="state.pagination.currentPage"

        :page-size="state.pagination.pageSize"

        :page-sizes="[1, 5,10,15]"

        layout="total, sizes, prev, pager, next, jumper"

        :total="state.pagination.total">

    </el-pagination>
  </div>

  <!--  新增用户弹窗-->
  <el-dialog
      v-model="state.dialogFormVisible"
      title="新增司机车辆"
      width="30%"
  >
    <template #footer>
        <span class="dialog-footer">
          <div class="filter-container">
            <el-form :model="state.formData"  :rules="rules" ref="ruleFormRef">
    <el-row >
        <el-col span="3" >
        <el-form-item label="司机姓名:" prop="driverName">
          <el-input placeholder="请输入司机姓名" v-model="state.formData.driverName" clearable/>
        </el-form-item>
      </el-col>
        <el-col span="3">
        <el-form-item label="联系方式:" prop="driverPhone">
          <el-input placeholder="请输入联系方式" v-model="state.formData.driverPhone" clearable/>
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-form-item label="货车类型:" prop="type">
          <el-select placeholder="请选择类型" v-model="state.formData.type" >
            <el-option label="大型货车" value="大型货车"/>
            <el-option label="中型货车" value="中型货车"/>
            <el-option label="小型货车" value="小型货车"/>
          </el-select>
        </el-form-item>
      </el-col>
       <el-col span="3">
        <el-form-item label="工资填写:" prop="salary">
          <el-input placeholder="请输入工资" v-model="state.formData.salary"  clearable/>
        </el-form-item>
      </el-col>
    </el-row>
</el-form>
  </div>
          <el-button @click="state.dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAdd(ruleFormRef)">
            确定
          </el-button>
        </span>
    </template>
  </el-dialog>

  <!--修改用户弹窗-->
  <el-dialog
      v-model="state.dialogFormVisible4Edit"
      title="修改司机"
      width="30%"
  >
    <!--    <span>新增司机</span>-->
    <template #footer>
        <span class="dialog-footer">
          <div class="filter-container">
            <el-form v-model="state.formData">
    <el-row>
        <el-col span="3">
        <el-form-item label="司机姓名:">
          <el-input placeholder="请输入司机姓名" v-model="state.formData.driverName" clearable/>
        </el-form-item>
      </el-col>
        <el-col span="3">
        <el-form-item label="联系方式:">
          <el-input placeholder="请输入联系方式" v-model="state.formData.driverPhone" clearable/>
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-form-item label="货车类型:">
          <el-select placeholder="请选择类型" v-model="state.formData.type">
            <el-option label="大型货车" value="大型货车"/>
            <el-option label="中型货车" value="中型货车"/>
            <el-option label="小型货车" value="小型货车"/>
          </el-select>
        </el-form-item>
        </el-col>
        <el-col span="3">
        <el-form-item label="薪资修改:">
          <el-input placeholder="请输入修改的金额" v-model="state.formData.salary" clearable/>
        </el-form-item>
      </el-col>
    </el-row>
              </el-form>
  </div>
          <el-button @click="state.dialogFormVisible4Edit = false">取消</el-button>
          <el-button type="primary" @click="handleUpdate">
            确定
          </el-button>
        </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {reactive, ref} from "vue";
import instance from "../../../request";
import {ElMessage, ElMessageBox} from "element-plus";

const state = reactive({
  dataList: [],//表格数据
  options: [],
  selectedOptions: [],
  formData: {
    driverName: '',
    driverPhone: '',
    type:'',
    salsry:''
  },
  dialogFormVisible: false,//添加表单是否可见
  dialogFormVisible4Edit: false,//编辑表单是否可见
  /* rules: {//校验规则
     driverName: [{required: true, message: '司机名字为必填项', trigger: 'blur'}],
     driverPhone: [{required: true, message: '司机联系为必填项', trigger: 'blur'}],
     type: [{required: true, message: '车辆名称为必填项', trigger: 'blur'}],
     status: [{required: true, message: '司机状态为必填项', trigger: 'blur'}],
     salary: [{required: true, message: '司机工资为必填项', trigger: 'blur'}]
   },*/
  pagination: {//分页相关模型数据
    currentPage: 1,//当前页码
    pageSize: 10,//每页显示的记录数
    total: 0,//总记录数
    driverName:"",
    driverPhone:"",
    type:"",
    status:"",
    salary:""
  }

})
//多选选择器
const ruleFormRef = ref(null)
///^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/
const rules = reactive({
  driverName:[{required: true, message: '请输入姓名', trigger: 'blur' },
    {pattern:/^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/,message: "请输入合法的姓名",trigger: "blur"}],
  driverPhone:[{required: true, message: '请输入联系方式', trigger: 'blur' },
    {pattern:/^1\d{10}$/,message: "请输入正确的手机号",trigger: "blur"}],
  type:[{required: true, message: '请输入货车类型', trigger: 'change' }],
  ///^\d{n}$/
  salary:[{required: true, message: '请输入工資', trigger: 'blur' },
    {pattern:/^\d{4,6}$/,message: "公司没有这样的工资，你不是财务人员",trigger: "blur"}]
})

const load = () => {
  let param="?driverName="+state.pagination.driverName;
  param+="&type="+state.pagination.type;
  param+="&status="+state.pagination.status;
  instance.get("/driver/"+state.pagination.currentPage+"/"+state.pagination.pageSize+param).then( res => {
    state.pagination.total=res.data.total;
    state.dataList = res.data.list;
    console.log(res.data.list);
    for (let i = 0; i < state.dataList.length; i++) {
      if (state.dataList[i].status==0){
        state.dataList[i].status="空闲中"
      }else if (state.dataList[i].status==1){
        state.dataList[i].status="等待中"
      }else if (state.dataList[i].status==2){
        state.dataList[i].status="运输中"
      }
    }
  })
}
const handleCreate = () => {
  state.dialogFormVisible = true;
  resetForm();
}

const resetForm = () => {
  state.formData ={};
}
const cancel = () => {
  state.dialogFormVisible = false;
  state.dialogFormVisible4Edit = false;
}
//添加
const handleAdd =async (formEl) => {
  await formEl.validate((valid, fields) => {
    if (valid){
      instance.get("driver/findPhone/"+state.formData.driverPhone).then((res)=>{
        if (res.data){
          instance.post("/driver/", state.formData).then((res) => {
            //如果操作成功，关闭弹层，显示数据
            if (res.flag) {
              state.dialogFormVisible = false;
              ElMessage({
                type: 'success',
                message: '添加成功',
              })
            } else {
              state.dialogFormVisible = false;
              ElMessage({
                type: 'error',
                message: '添加失败',
              })
            }
          }).finally(() => {
            load()
          })
        }else {
          ElMessage({
            type: 'error',
            message: '您的电话号码太火爆了，请换一个填写',
          })
        }

      });
    }else {
      ElMessage({
        type: 'error',
        message: '信息未完全填入，请补充完整',
      })
    }
  })

}
const  handleEidt=(row)=> {
  console.log(row.id)

  instance.get("/driver/"+row.id).then(res=>{
    console.log(res.data)
    if(res.flag){
//展示弹层，加载数据

      state.formData=res.data
      state.dialogFormVisible4Edit = true
    }else{
      console.log("失败")
    }
  })
}

const handleUpdate = (row) => {
  instance.put("/driver",state.formData).then(res=>{
    if (res.flag){
      state.dialogFormVisible4Edit=false;
      ElMessage({
        type: 'success',
        message: '修改成功',
      })
    }else {
      ElMessage({
        type: 'error',
        message: '修改失败',
      })
    }
  }).finally(()=>{
    load()
  })

}


const handleDelete = (row) => {
  instance.get("/driver/findStatus/"+row.id).then((res)=>{
    if (res.data){
      ElMessageBox.confirm(
          '是否删除该司机?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        instance.delete("/driver/" + row.id).then((res) => {
          if (res.data) {
            ElMessage({
              type: 'success',
              message: '删除成功',
            })
          } else {
            ElMessage({
              type: 'error',
              message: '删除失败',
            })
          }
        }).finally(() => {
          load()
        });
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除',
        })
      })
    }else {
      ElMessage({
        type: 'error',
        message: '司机正在运输，禁止删除',
      })
    }
  })

}
const  handleCurrentChange=(currentPage)=>{
  state.pagination.currentPage=currentPage;
  load()
}
const handleSizeChange=(pageSize)=>{
  state.pagination.pageSize=pageSize;
  load()
}


load()

</script>

<style scoped>
.filter-container {
  margin-bottom: 20px;
}

.filter-container .el-form-item {
  margin-right: 10px;
}

.filter-container .butT {
  margin-left: 10px;
}
</style>